<template>
  <ElDialog :title="title" v-model="visible" width="800px" @close="handleClose">
    <div class="p-0 max-h-[60vh] overflow-y-auto">
      <div class="flex bg-white">
        <!-- 消息类型标签 -->
        <div
          class="flex-shrink-0 w-[60px] h-[60px] flex items-center justify-center rounded-full text-base mr-5 p-[5px] text-center bg-[rgba(215,221,225,1)] text-[rgba(85,114,131,1)]">
          <span class="text-center text-[14px] leading-[18px] w-[28px]">系统公告</span>
        </div>

        <!-- 消息内容区域 -->
        <div class="flex-1">
          <div class="flex justify-between items-center mb-2">
            <div class="text-sm text-[rgba(25,25,25,1)]">
              {{ formatTime(currentAnnouncement?.createTime) }}
            </div>
          </div>
          <h3 class="text-lg font-semibold text-[rgba(25,25,25,1)] m-0 mb-4 leading-[1.5]">
            {{ currentAnnouncement?.title }}
          </h3>
          <MarkdownViewer :content="currentAnnouncement?.content || ''" />
        </div>
      </div>
    </div>

    <template #footer>
      <div class="flex justify-end items-center">
        <div class="flex space-x-2">
          <ElButton @click="handleClose" type="primary" class="px-4 py-1">
            关闭
          </ElButton>
        </div>
      </div>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElDialog, ElButton } from 'element-plus'
import MarkdownViewer from '#/components/MarkdownViewer.vue';

interface AnnouncementItem {
  id?: string | number
  title?: string
  content?: string
  createTime?: number | string
  [key: string]: any
}

interface Props {
  modelValue: boolean
  announcements: AnnouncementItem[]
  currentIndex: number
  title?: string
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'update:currentIndex', value: number): void
  (e: 'close'): void
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  announcements: () => [],
  currentIndex: 0,
  title: '公告详情'
})

const emit = defineEmits<Emits>()

// 计算属性
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const currentAnnouncement = computed(() => {
  return props.announcements[props.currentIndex] || null
})

// 格式化时间
const formatTime = (timestamp: number | string | undefined) => {
  if (!timestamp) return ''
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

// 事件处理
const handleClose = () => {
  emit('update:modelValue', false)
  emit('close')
}
</script>

<style lang="scss" scoped></style>
